import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import PrimeVue from 'primevue/config'
import './assets/main.scss'


// 导入全局加载服务
import { LoadingService } from './utils/loading'

// PrimeVue组件
import Button from 'primevue/button'
import Card from 'primevue/card'
import Divider from 'primevue/divider'
import Timeline from 'primevue/timeline'
import ProgressBar from 'primevue/progressbar'
import Tooltip from 'primevue/tooltip'

// PrimeVue样式
import 'primevue/resources/themes/lara-light-teal/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'

// Prism.js代码高亮
import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-css'
import 'prismjs/components/prism-markup'
import 'prismjs/components/prism-jsx'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-bash'
// 添加行号插件
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
// 添加复制按钮插件
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.js'
import 'prismjs/plugins/toolbar/prism-toolbar.css'
import 'prismjs/plugins/toolbar/prism-toolbar.js'
import 'prismjs/plugins/show-language/prism-show-language.js'

const app = createApp(App)

app.use(router)
app.use(PrimeVue, { ripple: true })

// 注册PrimeVue组件
app.component('Button', Button)
app.component('Card', Card)
app.component('Divider', Divider)
app.component('Timeline', Timeline)
app.component('ProgressBar', ProgressBar)

// 注册自定义指令
app.directive('tooltip', Tooltip)

// 初始化Prism
Prism.manual = false // 设置为false，让Prism自动高亮代码
app.config.globalProperties.$prism = Prism

// 注册全局加载服务
app.config.globalProperties.$loading = LoadingService

app.mount('#app')